<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何给jQuery扩展方法</title>
</head>
<body>
    <div id="tel"></div>
    <div id="text"></div>
    <button id="btn">我是按钮</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="../js/bing.js"></script>
    <script>
        //给jQuery对象扩展方法
        //$ 其实是 jQuery对象的简写  get()方法，就是jQuery对象的方法
        jQuery.get('http://www.bingjs.com:81/Grade/GetAll',
        function(res){
            console.log(res);
        })

        //extend()方法，用于给jQuery对象扩展方法
        $.extend($b)

        let tel = '15912345678'
        // $('#tel').text($b.telmosic(tel))
        $('#tel').text($.telmosic(tel))
        let text = '在本赛季，梅西仅仅缺席了2场比赛，而巴萨分别以4比0、3比0的比分战胜了基辅迪纳摩、费伦茨瓦罗斯。'
        // $('#text').text($b.textmosic(text)).attr('title',text)
        $('#text').text($.textmosic(text)).attr('title',text)

        
        //给jQuery的实例对象扩展方法
        $.fn.extend({
            red(){
                $(this).css('color','red')
            },
            green(){
                $(this).css('color','green')
            }
        })

        $('#tel').red()
        $('#text').green()
        $('#btn').red()

        console.log('-------------------------------');
        let zjl = {
            sing:function(){
                console.log('正在唱歌...');
            }
        }
        let wyz = {
            filming:function(){
                console.log('正在拍戏...');
            }
        }
        let xtf = {
            cook:function(){
                console.log('正在做饭...');
            }
        }
        //extend()方法，如果传多个对象，是将后面对象的方法扩展给第一个对象
        $.extend(xtf,zjl,wyz)
        console.log(xtf);
        xtf.cook()
        xtf.sing()
        xtf.filming()
    </script>
</body>
</html>